<template>
  <div class="person-pane">
    <el-row>
      <el-col :span="2">
        <el-menu
          :default-active="personIndex"
          class="el-menu"
          id="person-menu"
          mode="vertical"
          @select="menuSelected"
        >
          <el-menu-item index="home">
            <span class="works-menu theme">
              <ri i="user"></ri>
              主页
            </span>
          </el-menu-item>
          <el-menu-item index="history">
            <span class="works-menu theme">
              <ri i="history"></ri>
              动态
            </span>
          </el-menu-item>
          <el-menu-item index="works">
            <span class="works-menu theme">
              <ri i="book"></ri>
              作品
            </span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="22">
        <div class="works-content-pane">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      pid: this.$route.params.pid,
      person: {},
      personIndex: "home",
    };
  },
  methods: {
    menuSelected(index) {
      console.log("index:", index)
      // this.$router.push({path: index, params: this.$route.params})
      // this.$router.go(this.$route.path, + '/' + index);
      this.$router.push(index)

    }
  },
};
</script>

<style lang="stylus">
.person-pane
  .el-menu-item.is-active
    border-right 2px solid #409EFF
</style>